

<template>
  <div class="detailed">
    <a-modal
      title="数据明细"
      width="900px"
      :visible="visible"
      :confirm-loading="confirmLoading"
      cancelText="取消"
      okText="导出"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-tabs v-model="activeId" class="table" @change="handleTabChange">
        <a-tab-pane v-for="item in tabOptions" :key="item.id" :tab="item.label"></a-tab-pane>
      </a-tabs>
      <a-table :columns="columns" :data-source="data" @change="handlePageChange" :pagination="{current: currentPage, total }"></a-table>
    </a-modal>


  </div>
</template>

<script >
import { mapState } from "vuex"
import { getTableDataServe } from "@/api/labelSystem"
import { getFieldListByComponent } from "../../lib/analysisData"

export default {
  data() {
    return {
      activeId: "base",
      tabOptions: [
        {
          id: "base",
          label: "基础数据"
        },
        {
          id: "detailed",
          label: "详细数据"
        }
      ],
      confirmLoading: false,
      visible: false,
      currentPage: 1,
      total: 0,
      data: [],
      columns: [],
    }
  },
  computed: {
    ...mapState("lowCode", {
      selectedComponent: state => state.selectedComponent,
    }),
  },
  methods: {
    getData(){
      const list = getFieldListByComponent(this.selectedComponent)
      const {
        tableName,
        datasourceId: dataSourceId
      } = this.selectedComponent.props.value
      // console.log('getTableDataServe',Api.getTableDataServe)
      getTableDataServe({
        pageNo: this.currentPage,
        // currentPage: this.currentPage,
        dataSourceId,
        tableName,
        pageSize: 10,
      }).then(res => {
        const data = res.data.records[0]
        if(this.activeId === "base"){
          this.columns = list.map(item => ({
              title: item.label,
              dataIndex: item.value,
              key: item.value
            }))
        }
        else {
          this.columns = data.columns.map(item => ({
              title: item,
              dataIndex: item,
              key: item
            }))
        }

        this.currentPage = res.data.current
        this.total = res.data.total
        this.data = data.dataSource
      })
    },
    show(){
      this.visible = true
      this.getData()
    },
    handleOk(){

    },
    handleCancel(){
      this.visible = false
    },
    handleTabChange(value){
      this.activeId = value
      this.getData()
    },
    handlePageChange(page){
      // console.log(page)
      this.currentPage = page.current
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
